<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户添加</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/addActor.css">
</head>

<body>
  <div class="myTable">
    <form id="myForm">
      <div class="form-group">
        <label for="exampleInputEmail1">请输入用户昵称</label>
        <input type="text" class="form-control" id="nickName" placeholder="用户昵称" name="nickName">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请输入用户姓名</label>
        <input type="text" class="form-control" id="name" placeholder="用户姓名" name="name">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请输入密码</label>
        <input type="password" class="form-control" id="password"  name="password">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请选择用户角色</label>
        <select name="actorId" id="actor" class="form-control mySelect" required="required">
          <!-- todo -->
        </select>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="lib/js/jquery-1.12.4.js"></script>
  <script src="js/loginText.js"></script>



  <!-- 下拉选择框渲染 -->
  <script type="text/template" id="mySelectData">
    <% for(let i = 0; i < data.length; i++) { %>
      <option value="<%=data[i]%>"><%=data[i]%></option>
    <% } %>
  </script>

  <script>
    // 提交提交事件
    window.onload = function () {
      $("#myForm").submit(function (e) {
        e.preventDefault()
        var nickName = $('#nickName')[0].value.trim()
        var name = $('#name')[0].value.trim()
        var password = $('#password')[0].value.trim()
        var actor = $('#actor')[0].value
        console.log(nickName)
        console.log(name)
        console.log(password)
        console.log(actor)

        if (!nickName) {
          window.alert('用户昵称不能为空')
          return
        }
        if (!name) {
          window.alert('用户姓名不能为空')
          return
        }
        
        if (confirm("确认添加？")) {
          $.ajax({
            url: '/pages/user/insert',
            type: 'post',
            data: JSON.stringify({
              nickName,
              name,
              psw: password,
              actor
            }),
            dataType: 'json',
            contentType:'application/json;charset=UTF-8',
            success: function (res) {
              self.location = 'user.html'
            }
          })
        } else {
          return
        }
      });
      // 角色渲染
      getAllActors(function (res) {
        console.log(res)
        $('.mySelect').html(template('mySelectData', {
          data: res
        }))
      })


    }

    // 请求后台所有角色函数封装
    function getAllActors(callback) {
      $.ajax({
        url: '/pages/getActors',
        type: 'get',
        data: '',
        dataType: 'json',
        contentType:'application/json;charset=UTF-8',
        success: function (res) {
          callback && callback(res)
        }
      })
    }


  </script>
  <script src="lib/js/template-native.js"></script>

  <script src="lib/js/mock.js"></script>
  <script src="mock/getAllActors.js"></script>
  <script src="mock/addUser.js"></script>
  
</body>

</html>